<!-- 通用报表 -->
<template>
  <div class="systemPage-wrapper">
    <div class="messager">
      <messager-Detail
        v-if="visable"
        @hide="hide"
        :detailId="detailId"
        :isbrower="isbrower"
        @query="queryData(0)"
      ></messager-Detail>
      <div class="topbar">
        <span
          class="iconfont iconxitongpingtai-xiaoxizhongxin-xinshixinxi"
        ></span>
        <span>信使管理</span>
      </div>
      <div class="content-background">
        <div class="content-wrapper">
          <div class="searches-wrapper">
            <div class="buttons-wrapper">
              <span
                :class="[
                  multipleSelection.length > 0 && isAble
                    ? 'systemButtonDelete'
                    : 'systemButtonDelete systemButtonDisabled',
                ]"
                @click="del"
                >删除</span
              >
              <span class="systemButtonEdit" @click="edit">编辑</span>
              <span class="systemButtonAdd" @click="add">新增</span>
            </div>
            <div class="query-wrapper">
              <div class="query-box">
                <div class="span-name">关键词:</div>
                <el-input
                  v-model="queryList.keyword"
                  placeholder="请输入内容"
                  class="systemInput"
                ></el-input>
              </div>
              <div class="systemButtonQuery query-box" @click="queryData(0)">
                <span>查询</span>
              </div>
            </div>
          </div>
          <el-table
            class="systemTable"
            :highlight-current-row="true"
            stripe
            :data="historyData"
            ref="multipleTable"
            height="tableHeight"
            max-height="calc(100%)"
            size="medium"
            row-class-name="row"
            cell-class-name="column"
            @selection-change="handleSelectionChange"
            @select="select"
            @select-all="selectAll"
            @row-click="rowClick"
            @row-dblclick="dblclick"
            style="width: 100%"
            :fit="true"
          >
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column
              min-width="80"
              v-for="(item, index) in tableLabel"
              :key="index"
              :prop="item.prop"
              :width="item.width"
              :label="item.label"
              align="center"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <template v-if="item.prop === 'state'">
                  <span
                    v-if="scope.row.state == 0"
                    style="color: rgba(249, 73, 99, 1)"
                    >未发送</span
                  >
                  <span
                    v-if="scope.row.state == 1"
                    style="color: rgba(83, 168, 255, 1)"
                    >已发送</span
                  >
                </template>
                <template v-else-if="item.prop == 'grade'">
                  <span
                    v-if="scope.row.grade === '0'"
                    style="color: rgba(111, 178, 117, 1)"
                    >一般</span
                  >
                  <span
                    v-if="scope.row.grade === '1'"
                    style="color: rgba(83, 168, 255, 1)"
                    >重要</span
                  >
                  <span
                    v-if="scope.row.grade === '2'"
                    style="color: rgba(249, 73, 99, 1)"
                    >紧急</span
                  >
                </template>
                <template
                  v-else-if="item.prop !== 'grade' && item.prop !== 'state'"
                  >{{ scope.row[scope.column.property] }}</template
                >
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            class="systemPagination"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="pageSizes"
            :page-size="queryList.pageSize"
            background
            layout="sizes,slot, prev, pager, next, jumper"
            :total="total"
          >
            <span class="totalCount"
              >从{{ start }}到{{ end }}/共{{ total }}条数据</span
            >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import messagerDetail from "../components/message/messagerDetail.vue";
import { sendList, deleteSend } from "@/system/api/message";
export default {
  components: {
    messagerDetail,
  },
  data() {
    return {
      pageSizes: [10, 20, 30, 40],
      start: 1,
      end: 10,
      total: 0,
      visable: false,
      isActive: 1,
      currentPage: 1,
      available: "true",
      historyData: [],
      tableHeight: 0,
      queryList: {
        keyword: "",
        page: 0,
        pageSize: 10,
      },
      detailId: "",
      multipleSelection: [],
      // 表格数据
      tableData: [],
      // 表头数据
      tableLabel: [
        {
          label: "消息主题",
          width: "",
          prop: "title",
        },
        {
          label: "发送用户",
          width: "",
          prop: "from",
        },
        {
          label: "接收用户",
          width: "",
          prop: "accept",
        },
        {
          label: "发送时间",
          width: "",
          prop: "time",
        },
        {
          label: "重要程度",
          width: "",
          prop: "grade",
        },
        {
          label: "是否发送",
          width: "",
          prop: "state",
        },
      ],
    };
  },
  async mounted() {
    await this.getTableHeight();
    this.queryData(0);
  },
  methods: {
    // table高度
    getTableHeight() {
      let that = this;
      let contentHeight = document.getElementsByClassName("content-wrapper")[0]
        .offsetHeight;
      let searchesHeight = document.getElementsByClassName(
        "searches-wrapper"
      )[0].offsetHeight;
      that.tableHeight = contentHeight - searchesHeight - 72;
      let tableBodyHeight = that.tableHeight - 40;
      that.queryList.pageSize = parseInt(tableBodyHeight / 40);
      this.end = parseInt(tableBodyHeight / 40);
      that.pageSizes.push(that.queryList.pageSize);
    },
    //新增
    add() {
      this.visable = true;
      this.detailId = 0;
      this.isbrower = false;
    },
    //关闭详情页面
    hide() {
      this.visable = false;
      this.$refs.multipleTable.clearSelection();
    },
    queryData(page) {
      if (page) {
        this.queryList.page = page - 1;
        this.currentPage = page;
      } else {
        this.queryList.page = 0;
        this.currentPage = 1;
      }
      sendList(this.queryList).then((res) => {
        if (res.code == "200") {
          this.total = res.totalCount;
          this.tableData = res.info;
          if (res.totalCount < this.queryList.pageSize) {
            this.historyData = this.tableData;
          } else {
            this.historyData = this.tableData.slice(0, this.queryList.pageSize);
          }
        } else {
          this.historyData = [];
          this.currentPage = 1;
          this.total = 0;
        }
      });
    },
    handleSizeChange(val) {
      this.queryList.pageSize = val;
      this.start = 1;
      this.end = val;
      this.queryData(0);
    },
    handleCurrentChange(val) {
      this.start = this.queryList.pageSize * (val - 1) + 1;
      this.end = this.queryList.pageSize * val;
      this.queryData(val);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      let count = 0;
      for (let j = 0; j < this.multipleSelection.length; j++) {
        if (this.multipleSelection[j].state == 0) {
          count = count + 1;
        }
      }
      this.isAble = count;
    },
    select(e) {
      this.multipleSelection = e;
    },
    selectAll(e) {
      this.multipleSelection = e;
    },
    rowClick(row, col, event) {
      row.flag = !row.flag;
      this.$refs.multipleTable.toggleRowSelection(row, row.flag);
    },
    dblclick(row, col, event) {
      this.visable = true;
      this.isbrower = true;
      this.detailId = row.id;
    },
    del() {
      if (this.multipleSelection.length === 0) {
        return;
      } else {
        var selections = this.multipleSelection;
        var array = [];
        var arraySend = [];
        Object.keys(selections).forEach(function (i) {
          if (selections[i].state == 0) {
            array.push(selections[i].id);
          } else {
            arraySend.push(selections[i].id);
          }
        });
        var ids = array.join(",");
        var sendIds = arraySend.join(",");
        if (sendIds.length > 0) {
          this.message("选中的信息中存在已发送消息，已发送信息不允许删除！", 3);
          return false;
        }
        if (ids == undefined || ids.length <= 0) {
          this.message("请先选中需要删除的消息！", 3);
          return false;
        }
        this.messageBox("确认删除？").then((c) => {
          if (c.action) {
            deleteSend({
              ids: ids,
            }).then((res) => {
              if (res.code == 200) {
                this.message("删除成功！", 1);
                this.queryData();
              } else {
                this.message(res.info, 3);
              }
            });
          }
        });
      }
    },
    edit() {
      if (this.multipleSelection.length !== 1) {
        this.message("必须选中一条记录", 3);
        return false;
      }
      if (this.multipleSelection[0].state == 1) {
        this.message("已发送的信使不允许编辑！", 3);
        return false;
      }
      this.visable = true;
      this.isbrower = false;
      this.detailId = this.multipleSelection[0].id;
    },
  },
};
</script>

<style scoped>
.center {
  overflow-y: auto;
  min-width: 1200px;
  width: 100%;
  height: calc(100% - 42px);
}

.messager {
  width: 100%;
  height: 100%;
}

.content {
  background: rgba(255, 255, 255, 1);
  border: 1px solid var(--div-border-color);
  border-radius: 6px;
  height: 100%;
}
</style>
<style>
</style>
